<template>
  <div class="ebook-bookmark" ref="bookmark">
    <div class="ebook-bookmark-text-wrapper">
      <div class="ebook-bookmark-dowm-wrapper" ref="iconDown">
        <span class="icon-down"></span>
      </div>
      <div class="ebook-bookmark-text">{{ text }}</div>
    </div>
    <!-- 书签组件 -->
    <div class="ebook-bookmark-icon-wrapper" :style="isFixed ? fixedStyle : {}">
      <Bookmark :color="color" :width="15" :height="35"></Bookmark>
    </div>
  </div>
</template>

<script>
import { realPx } from '@/utils/utils';
import Bookmark from '../common/Bookmark.vue';
import { ebookMixin } from '@/utils/mixin';
import { getBookmark, saveBookmark } from '@/utils/localStorage';

const BLUE = '#346CAC';
const WHITE = '#FFF';

export default {
  mixins: [ebookMixin],
  components: { Bookmark },
  data() {
    return {
      text: '',
      color: WHITE,
      isFixed: false,
    };
  },
  watch: {
    // #实现吸附效果,通过改变蒙版的top值
    offsetY(newValue) {
      if (!this.bookAvailable || this.menuVisible || this.settingVisible >= 0)
        return;
      if (newValue >= this.height && newValue <= this.threshold) {
        this.beforeThreshold(newValue);
      } else if (newValue >= this.threshold) {
        this.afterThreshold(newValue);
      } else if (newValue > 0 && this.height) {
        this.beforeHeight();
      } else if (newValue === 0) {
        this.restore();
      }
    },
    isBookmark(isBookmark) {
      this.isFixed = isBookmark;
      if (isBookmark) {
        this.color = BLUE;
      } else {
        this.color = WHITE;
      }
    },
  },
  computed: {
    height() {
      return realPx(35);
    },
    threshold() {
      return realPx(55);
    },
    fixedStyle() {
      return {
        position: 'fixed',
        right: `${(window.innerWidth - this.$refs.bookmark.clientWidth) / 2}px`,
        top: 0,
      };
    },
  },
  methods: {
    // *初始拉动
    beforeHeight() {
      // !状态1
      if (this.isBookmark) {
        this.text = this.$t('book.pulldownDeleteMark');
        this.color = BLUE;
        this.isFixed = true;
      } else {
        this.text = this.$t('book.pulldownAddMark');
        this.color = WHITE;
        this.isFixed = false;
      }
    },
    // *到达临界状态之前的函数
    beforeThreshold(newValue) {
      // !状态2:未到达零界状态
      this.$refs.bookmark.style.top = `${-newValue}px`;
      this.beforeHeight();
      const iconDown = this.$refs.iconDown;
      if (iconDown.style.transform === 'rotate(180deg)') {
        iconDown.style.transform = 'rotate(0deg)';
      }
    },
    // *到达临界状态之后的函数
    afterThreshold(newValue) {
      // !状态3:超越零界状态
      this.$refs.bookmark.style.top = `${-newValue}px`;
      if (this.isBookmark) {
        this.text = this.$t('book.releaseDeleteMark');
        this.color = WHITE;
        this.isFixed = false;
      } else {
        this.text = this.$t('book.releaseAddMark');
        this.color = BLUE;
        this.isFixed = true;
      }
      const iconDown = this.$refs.iconDown;
      if (
        iconDown.style.transform === 'rotate(0deg)' ||
        iconDown.style.transform === ''
      ) {
        iconDown.style.transform = 'rotate(180deg)';
      }
    },
    // *归位函数
    restore() {
      // !状态4
      setTimeout(() => {
        this.$refs.bookmark.style.top = `${-this.height}px`;
        this.$refs.iconDown.style.transform = `rotate(0deg)`;
      }, 200);
      if (this.isFixed) {
        this.setIsBookmark(true);
        this.addBookmark();
      } else {
        this.setIsBookmark(false);
        this.removeBookmark();
      }
    },
    // *添加当前书签页
    addBookmark() {
      this.bookmark = getBookmark(this.fileName);
      if (!this.bookmark) {
        this.bookmark = [];
      }
      // .获取文本
      const currentLoaction = this.currentBook.rendition.currentLocation();
      const cfibase = currentLoaction.start.cfi.replace(/!.*/, '');
      const cfistart = currentLoaction.start.cfi
        .replace(/.*!/, '')
        .replace(/\)$/, '');
      const cfiend = currentLoaction.end.cfi
        .replace(/.*!/, '')
        .replace(/\)$/, '');
      const cfirange = `${cfibase}!,${cfistart},${cfiend})`;
      this.currentBook.getRange(cfirange).then((range) => {
        const text = range.toString().replace(/\s\s/g, '');
        this.bookmark.push({
          cfi: currentLoaction.start.cfi,
          text: text,
        });
        saveBookmark(this.fileName, this.bookmark);
      });
    },
    // *移除当前书签页
    removeBookmark() {
      const currentLoaction = this.currentBook.rendition.currentLocation();
      const cfi = currentLoaction.start.cfi;
      this.bookmark = getBookmark(this.fileName);
      if (this.bookmark) {
        this.bookmark = this.bookmark.filter((item) => item.cfi !== cfi);
        saveBookmark(this.fileName);
        this.setIsBookmark(false);
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';
.ebook-bookmark {
  position: absolute;
  top: px2rem(-35);
  left: 0;
  z-index: 200;
  width: 100%;
  height: px2rem(35);
  .ebook-bookmark-text-wrapper {
    position: absolute;
    right: px2rem(45);
    bottom: 0;
    display: flex;
    .ebook-bookmark-dowm-wrapper {
      font-size: px2rem(14);
      color: #fff;
      transition: all 0.2s linear;
      @include center;
    }
    .ebook-bookmark-text {
      font-size: px2rem(14);
      color: #fff;
    }
  }
  .ebook-bookmark-icon-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: px2rem(15);
  }
}
</style>
